#bubble{
	width: 150px;
}
/*btn0*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
	/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn9{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 180px;
	height: 180px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#ead6ee,#a0f1ea);
	margin-top: 0px;
	box-shadow: 0 0 5px pink;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn9_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn9_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn9:before,.btn9:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn9:before{
	top: -75%;
	background-image: radial-gradient(circle, pink 20%, transparent 20%),
	radial-gradient(circle, rgb(143,177,207) 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, pink 15%, transparent 20%),
	radial-gradient(circle, pink 20%, transparent 20%),
	radial-gradient(circle, rgb(143,177,207) 20%, transparent 20%),
	radial-gradient(circle, rgb(143,177,207) 20%, transparent 20%),
	radial-gradient(circle, pink 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn9:after{
	bottom: -75%;
	background-image: radial-gradient(circle, rgb(143,177,207) 20%, transparent 20%),
	radial-gradient(circle, pink 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, pink 15%, transparent 20%),
	radial-gradient(circle, rgb(143,177,207) 20%, transparent 20%),
	radial-gradient(circle, pink 20%, transparent 20%),
	radial-gradient(circle, pink 20%, transparent 20%),
	radial-gradient(circle, rgb(143,177,207) 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn9:hover{
	width: 200px;
	height: 200px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn9:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#a0f1ea,#ead6ee);
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn9.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn9.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}


/*btn1*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn1{
	/* position: relative;
	display: inline-block; */
	opacity: 650%;
	width: 150px;
	height: 150px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#ead6ee,#a0f1ea);
	margin-top: 0px;
	box-shadow: 0 0 5px #ead6ee;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn1_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn1_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn1:before,.btn1:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn1:before{
	top: -75%;
	background-image: radial-gradient(circle, #ead6ee 20%, transparent 20%),
	radial-gradient(circle, #a0f1ea 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #ead6ee 15%, transparent 20%),
	radial-gradient(circle, #ead6ee 20%, transparent 20%),
	radial-gradient(circle, #a0f1ea 20%, transparent 20%),
	radial-gradient(circle, #a0f1ea 20%, transparent 20%),
	radial-gradient(circle, #ead6ee 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn1:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #a0f1ea 20%, transparent 20%),
	radial-gradient(circle, #ead6ee 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #ead6ee 15%, transparent 20%),
	radial-gradient(circle, #a0f1ea 20%, transparent 20%),
	radial-gradient(circle, #ead6ee 20%, transparent 20%),
	radial-gradient(circle, #ead6ee 20%, transparent 20%),
	radial-gradient(circle, #a0f1ea 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn1:hover{
	width: 170px;
	height: 170px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn1:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#a0f1ea,#ead6ee);
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn1.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn1.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}

/*btn2*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn2{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 120px;
	height: 120px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#eebd89,#d13abd);
	margin-top: 0px;
	margin-left: 30px;
	margin-right: 30px;
	box-shadow: 0 0 5px #eebd89;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn2_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn2_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn2:before,.btn2:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn2:before{
	top: -75%;
	background-image: radial-gradient(circle, #eebd89 20%, transparent 20%),
	radial-gradient(circle, #d13abd 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #eebd89 15%, transparent 20%),
	radial-gradient(circle, #eebd89 20%, transparent 20%),
	radial-gradient(circle, #d13abd 20%, transparent 20%),
	radial-gradient(circle, #d13abd 20%, transparent 20%),
	radial-gradient(circle, #eebd89 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn2:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #d13abd 20%, transparent 20%),
	radial-gradient(circle, #eebd89 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #eebd89 15%, transparent 20%),
	radial-gradient(circle, #d13abd 20%, transparent 20%),
	radial-gradient(circle, #eebd89 20%, transparent 20%),
	radial-gradient(circle, #eebd89 20%, transparent 20%),
	radial-gradient(circle, #d13abd 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn2:hover{
	width: 140px;
	height: 140px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn2:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#d13abd,#eebd89);
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn2.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn2.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}

/*btn3*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn3{
	/* position: relative;
    display: inline-block; */
	opacity: 85%;
	width: 160px;
	height: 160px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#6cc6cb,#eae5c9);
	margin-top: 0px;
	margin-right: 50px;
	box-shadow: 0 0 5px #eae5c9;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn3_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn3_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn3:before,.btn3:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn3:before{
	top: -75%;
	background-image: radial-gradient(circle, #eae5c9 20%, transparent 20%),
	radial-gradient(circle, #6cc6cb 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #eae5c9 15%, transparent 20%),
	radial-gradient(circle, #eae5c9 20%, transparent 20%),
	radial-gradient(circle, #6cc6cb 20%, transparent 20%),
	radial-gradient(circle, #6cc6cb 20%, transparent 20%),
	radial-gradient(circle, #eae5c9 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn3:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #6cc6cb 20%, transparent 20%),
	radial-gradient(circle, #eae5c9 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #eae5c9 15%, transparent 20%),
	radial-gradient(circle, #6cc6cb 20%, transparent 20%),
	radial-gradient(circle, #eae5c9 20%, transparent 20%),
	radial-gradient(circle, #eae5c9 20%, transparent 20%),
	radial-gradient(circle, #6cc6cb 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn3:hover{
	width: 180px;
	height: 180px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn3:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#eae5c9,#6cc6cb);
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn3.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn3.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}


/*btn4*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn4{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 200px;
	height: 200px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#8fb85b,#e0ff87);
	margin-top: 0px;
	margin-right: 20px;
	box-shadow: 0 0 5px #8fb85b;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn4_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn4_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn4:before,.btn4:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn4:before{
	top: -75%;
	background-image: radial-gradient(circle, #8fb85b 20%, transparent 20%),
	radial-gradient(circle, #e0ff87 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #8fb85b 15%, transparent 20%),
	radial-gradient(circle, #8fb85b 20%, transparent 20%),
	radial-gradient(circle, #e0ff87 20%, transparent 20%),
	radial-gradient(circle, #e0ff87 20%, transparent 20%),
	radial-gradient(circle, #8fb85b 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn4:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #e0ff87 20%, transparent 20%),
	radial-gradient(circle, #8fb85b 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #8fb85b 15%, transparent 20%),
	radial-gradient(circle, #e0ff87 20%, transparent 20%),
	radial-gradient(circle, #8fb85b 20%, transparent 20%),
	radial-gradient(circle, #8fb85b 20%, transparent 20%),
	radial-gradient(circle, #e0ff87 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn4:hover{
	width: 220px;
	height: 220px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn4:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#e0ff87,#8fb85b);
	box-shadow: 0 2px 25px #e0ff87;
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn4.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn4.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}


/*btn5*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn5{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 140px;
	height: 140px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#4a879a,#c5edf5);
	margin-top: 0px;
	box-shadow: 0 0 5px #4a879a;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn5_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn5_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn5:before,.btn5:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn5:before{
	top: -75%;
	background-image: radial-gradient(circle, #4a879a 20%, transparent 20%),
	radial-gradient(circle, #c5edf5 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #4a879a 15%, transparent 20%),
	radial-gradient(circle, #4a879a 20%, transparent 20%),
	radial-gradient(circle, #c5edf5 20%, transparent 20%),
	radial-gradient(circle, #c5edf5 20%, transparent 20%),
	radial-gradient(circle, #4a879a 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn5:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #c5edf5 20%, transparent 20%),
	radial-gradient(circle, #4a879a 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #4a879a 15%, transparent 20%),
	radial-gradient(circle, #c5edf5 20%, transparent 20%),
	radial-gradient(circle, #4a879a 20%, transparent 20%),
	radial-gradient(circle, #4a879a 20%, transparent 20%),
	radial-gradient(circle, #c5edf5 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn5:hover{
	width: 150px;
	height: 150px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn5:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#c5edf5,#4a879a);
	box-shadow: 0 2px 25px #c5edf5;
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn5.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn5.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}

/*btn6*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn6{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 120px;
	height: 120px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#dfd1c5,#fff6eb);
	margin-top: 0px;
	margin-left: 20px;
	margin-right: 20px;
	box-shadow: 0 0 5px #dfd1c5;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn6_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn6_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn6:before,.btn6:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn6:before{
	top: -75%;
	background-image: radial-gradient(circle, #dfd1c5 20%, transparent 20%),
	radial-gradient(circle, #fff6eb 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #dfd1c5 15%, transparent 20%),
	radial-gradient(circle, #dfd1c5 20%, transparent 20%),
	radial-gradient(circle, #fff6eb 20%, transparent 20%),
	radial-gradient(circle, #fff6eb 20%, transparent 20%),
	radial-gradient(circle, #dfd1c5 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn6:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #fff6eb 20%, transparent 20%),
	radial-gradient(circle, #dfd1c5 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #dfd1c5 15%, transparent 20%),
	radial-gradient(circle, #fff6eb 20%, transparent 20%),
	radial-gradient(circle, #dfd1c5 20%, transparent 20%),
	radial-gradient(circle, #dfd1c5 20%, transparent 20%),
	radial-gradient(circle, #fff6eb 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn6:hover{
	width: 140px;
	height: 140px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn6:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#fff6eb,#dfd1c5);
	box-shadow: 0 2px 25px #fff6eb;
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn6.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn6.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}


/*btn7*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn7{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 170px;
	height: 170px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#ffb800,#fff500);
	margin-top: 0px;
	box-shadow: 0 0 5px #ffb800;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn7_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn7_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn7:before,.btn7:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn7:before{
	top: -75%;
	background-image: radial-gradient(circle, #ffb800 20%, transparent 20%),
	radial-gradient(circle, #fff500 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #ffb800 15%, transparent 20%),
	radial-gradient(circle, #ffb800 20%, transparent 20%),
	radial-gradient(circle, #fff500 20%, transparent 20%),
	radial-gradient(circle, #fff500 20%, transparent 20%),
	radial-gradient(circle, #ffb800 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn7:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #fff500 20%, transparent 20%),
	radial-gradient(circle, #ffb800 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #ffb800 15%, transparent 20%),
	radial-gradient(circle, #fff500 20%, transparent 20%),
	radial-gradient(circle, #ffb800 20%, transparent 20%),
	radial-gradient(circle, #ffb800 20%, transparent 20%),
	radial-gradient(circle, #fff500 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn7:hover{
	width: 190px;
	height: 190px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn7:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#fff500,#ffb800);
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn7.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn7.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}


/*btn8*/
/*定位,设为行内块级元素好居中设置宽高,去除边框,设置圆角,背景颜色,外边距,阴影,鼠标样式,字体样式,*/
.btn8{
	/* position: relative;
    display: inline-block; */
	opacity: 650%;
	width: 130px;
	height: 130px;
	border: none;
	border-radius: 50%;
	background-color: crimson;
	background-image: linear-gradient(to right,#b1ff96,#ffadf7);
	margin-top: 0px;
	box-shadow: 0 0 5px #b1ff96;
	cursor: pointer;
	font-size:18px;
	color: #fff;
	font-family: "微软雅黑";
}
/*定义上面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn8_top {
	0% {
		background-position: 5% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*定义下面动画-改变背景的定位实现气泡的移动，最后大小为0实现气泡消失*/
@keyframes btn8_botton {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
/*统一设置按钮伪元素的样式-定位，宽高，背景不重复，隐藏*/
.btn8:before,.btn8:after{
	content: "";
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	background-repeat: no-repeat;
	display: none;
}
/*设置按钮上面伪元素的定位,背景气泡样式,大小
 * ===radial-gradient是设置径向渐变（辐射渐变）
 * ===circle圆
 * ===transparent透明
 * 用逗号隔开画多个圆圈气泡*/
.btn8:before{
	top: -75%;
	background-image: radial-gradient(circle, #b1ff96 20%, transparent 20%),
	radial-gradient(circle, #ffadf7 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #b1ff96 15%, transparent 20%),
	radial-gradient(circle, #b1ff96 20%, transparent 20%),
	radial-gradient(circle, #ffadf7 20%, transparent 20%),
	radial-gradient(circle, #ffadf7 20%, transparent 20%),
	radial-gradient(circle, #b1ff96 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;

}
/*设置按钮下面伪元素的定位,背景气泡样式,大小*/
.btn8:after{
	bottom: -75%;
	background-image: radial-gradient(circle, #ffadf7 20%, transparent 20%),
	radial-gradient(circle, #b1ff96 20%, transparent 20%),
	radial-gradient(circle, transparent 10%, #b1ff96 15%, transparent 20%),
	radial-gradient(circle, #ffadf7 20%, transparent 20%),
	radial-gradient(circle, #b1ff96 20%, transparent 20%),
	radial-gradient(circle, #b1ff96 20%, transparent 20%),
	radial-gradient(circle, #ffadf7 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;

}
.btn8:hover{
	width: 150px;
	height: 150px;
	color: rgb(106, 105, 101);
}
/*设置当按钮处于活动状态时的样式-缩小,改变背景颜色,边框阴影*/
.btn8:active {
	transform: scale(0.9);
	background-image: linear-gradient(to right,#ffadf7,#b1ff96);
	box-shadow: 0 2px 25px #ffadf7;
}
/*设置按钮按下时上面伪元素的样式-显示,执行一次动画*/
.btn8.animate::before{
	display: block;
	animation: btn1_top 1s 2 forwards;
}
/*设置按钮按下时下面伪元素的样式-显示,执行一次动画*/
.btn8.animate::after{
	display: block;
	animation: btn1_botton 1s 2 forwards;
}
		